.neo-calendar-weekcomponent {
    align-items   : stretch;
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    position      : relative;

    &.neo-timeaxis-end {
        .neo-c-w-column{
            border-left : 1px solid var(--c-w-border-color);
            border-right: none;

            &:first-child {
                border-left: 1px solid transparent;
            }

            &:last-child {
                border-right: none;
            };
        }

        .neo-header-row {
            margin-left : unset;
            margin-right: 50px;
        }

        .neo-scroll-overlay {
            left : unset;
            right: 0;
        }
    }

    .neo-c-w-scrollcontainer {
        display       : flex;
        flex          : 1 1 100%;
        flex-direction: column;
        overflow      : auto;
    }

    .neo-c-w-column{
        border-right  : 1px solid var(--c-w-border-color);
        display       : flex;
        flex          : 1 0 calc(100% / 21);
        flex-direction: column;
        position      : relative;

        &:last-child {
            border-right: 1px solid transparent;
        }

        &.neo-weekend {
            background-color: var(--c-w-weekend-background-color);
        }
    }

    .neo-c-w-column-timeaxis-container {
        align-items: stretch;
        display    : flex;
        min-width  : calc(300% - 100px);
    }

    .neo-c-w-column-container {
        align-items: stretch;
        display    : flex;
        flex       : 1 1 100%;
    }

    .neo-event {
        border-right    : 1px solid transparent;
        cursor          : pointer;
        display         : flex;
        flex-direction  : column;
        font-size       : .8em;
        overflow        : hidden;
        padding         : .2em .4em;;
        position        : absolute;


        transition:
            background-color .15s ease-out,
            border-color     .15s ease-out,
            color            .15s ease-out,
            height           .4s  ease-out,
            top              .4s  ease-out,
            width            .4s  ease-out;

        &.neo-dragproxy {
            > * {
                height: unset;
            }
        }

        &.neo-focus {
            color  : #fff;
            outline: 0;

            .neo-resizable {
                color: #fff;
            }
        }

        &.neo-show-end-time {
            &.neo-overflow {
                flex-wrap: wrap;

                .neo-event-title {
                    flex: 1 1 10%;
                }
            }
        }

        &.neo-overflow {
            flex-direction: row;

            .neo-event-end-time {
                flex: 1 0 100%;
            }

            .neo-event-title {
                margin: 0 0 0 .5em;
            }
        }
    }

    .neo-event-time,
    .neo-event-title {
        pointer-events: none;
        user-select   : none;
    }

    .neo-event-end-time {
        margin-top: auto;
        text-align: end;
    }

    .neo-event-title {
        font-weight  : bold;
        overflow     : hidden;
        text-overflow: ellipsis;
        white-space  : nowrap ;
    }

    &.neo-show-weekends {
        .neo-header-row-item {
            flex: 1 0 calc(100% / 7);
        }
    }

    .neo-header-row-item {
        align-items     : center;
        background-color: var(--c-w-header-background-color);
        border-bottom   : 1px solid var(--c-w-border-color);
        cursor          : pointer;
        display         : flex;
        flex            : 1 0 calc(100% / 5);
        flex-direction  : column;
        height          : 4.7em; // we need a fixed height for the bg margin top
        justify-content : center;
        padding-bottom  : 0.3125em;
        padding-top     : 0.625em;

        &:hover {
            .neo-date {
                background-color: var(--c-w-header-date-background-color-hover);
                color           : var(--c-w-header-date-color-hover);
            }
        }

        .neo-date {
            align-items    : center;
            border-radius  : 50%;
            color          : var(--c-w-header-date-color);
            display        : flex;
            font-size      : 1.6em;
            height         : 1.62em;
            justify-content: center;
            transition     : background-color 100ms ease-out;
            width          : 1.62em;

            &.neo-today {
                background-color: var(--c-w-header-today-background-color);
                color           : var(--c-w-header-today-color);
            }
        }

        .neo-day {
            color        : var(--c-w-header-day-color);
            font-size    : .7em;
            margin-bottom: .3em;
        }
    }

    .neo-header-row {
        display    : flex;
        flex       : none;
        margin-left: 50px;
        position   : sticky;
        top        : 0;
        z-index    : 100;
    }

    .neo-scroll-overlay {
        background-color: var(--c-w-header-background-color);
        height          : 4.4em;
        left            : 0;
        position        : absolute;
        top             : 0;
        width           : 51px;
        z-index         : 500;
    }
}
